<template>
<div class="fileView">
    <ul class="files">
        <li v-for="(file, index) in fileList" class="fileInfo" :title="file.filename">
            <img :src="file.filepath" :key="file.id" v-if="isImg(file.filetype)" @click="shwoImg(file)">
            <Sicon :href="getFileType(file.filetype)" class-name="fileIcon" v-else></Sicon>
            <!-- <span class="fileName">{{file.name}}</span> -->
            <i @click="handleRemove(file)">
                <Sicon href="guanbi" class-name="del"></Sicon>
            </i>
        </li>
    </ul>

    <viewer :options="options" :images="imgList" class="viewer clearfix" @inited="inited">
        <template slot-scope="scope">
            <span v-for="(image, index) in scope.images" class="image">
                <img :src="image.filepath" :key="image.id">
            </span>
        </template>
    </viewer>
</div>
</template>

<script>
import {
    getFileIcon,
    getFileType,
    getFileFullName,
    getFileName
} from '@/utils/file.js'

export default {
    props: {
        Files: {
            type: String,
        }
    },
    data() {
        return {
            options: {
                navbar: false,
            },
            fileList: [],
            imgList: [],
            imgType: ["jpg", "png", "jpeg", "gif"],
            filesString: ""
        }
    },
    watch: {
        Files: {
            handler: function (val, oldVal) {
                this.fileList = []

                let that = this
                if (val) {
                    JSON.parse(val).map((file, index) => {
                        that.fileList.push(file)
                        if (that.isImg(file.filetype)) {
                            that.imgList.push(file)
                        }
                    })
                }
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        inited(viewer) {
            this.$viewer = viewer
        },
        handleRemove(file) {
            let fileIndex = this.fileList.findIndex(f => f.key == file.key)
            this.fileList.splice(fileIndex, 1);
            if (this.isImg(file.src)) {
                let imgIndex = this.imgList.findIndex(f => f.key == file.key)
                this.imgList.splice(imgIndex, 1);
            }

            this.filesString = this.fileList.map(file => file.src).join(",")
        },
        getFileType(filetype) {
            let icon = getFileIcon(filetype)
            return icon
        },
        isImg(fileType) {
            return this.imgType.includes(fileType)
        },
        shwoImg(file) {
            let imgIndex = this.imgList.findIndex(f => f.id == file.id)
            this.$viewer.view(imgIndex);
            this.$nextTick(function () {
                document.querySelector(".viewer-container .viewer-prev").style.display = "none"
                document.querySelector(".viewer-container .viewer-next").style.display = "none"
            })
        }
    }
}
</script>

<style lang="less" scoped>
@width: 60px;
@height: 60px;

.fileView {
    .files {
        // overflow: hidden;
        // padding: 10px;

        .fileInfo {
            position: relative;
            float: left;
            width: @width;
            height: @height;
            margin-right: 20px;
            list-style-type: none;
            cursor: pointer;

            img {
                width: @width;
                height: @height;
                border-radius: 4px;
            }

            .fileIcon {
                width: @width;
                height: @height;
            }

            .fileName {
                display: block;
                text-align: center;
                width: @width;
                overflow: hidden;
            }

            .del {
                position: absolute;
                top: -8px;
                z-index: 9;
                right: -8px;
                cursor: pointer;
                background-color: red;
                border-radius: 50%;
                fill: #FFF;
                width: 1em;
                height: 1em;
                line-height: 12px;
            }
        }
    }
}

.image {
    display: none;
}
</style>
